iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

React基礎系列 第 12

第11天,React的props與state(下)

  • 分享至 

  • xImage
  •  

states 是元件內部狀態
State只能在 Class中使用。State的資料結構就是一個物件JavaScript Object。如果一個資料不會用在 render()中顯示邏輯,這資料不應該被存在 State。
執行constructor時,他會掃描過一遍有沒有state是沒有在constructor裡,沒有的話,他會給undefined。

1.State在Class的constructor() 中用 this.state 來初始化 State 物件。例:this.state={ 變數名稱A: 初始化值, 變數名稱B: 初始化值,...};
2.在 constructor() 以外的地方,要更新 State 只能透過元件提供的方法 this.setState({ example:15}) 來更新 State。
3.在 constructor() 以外的地方,要將prop的值給state時,要使用this.setState((state, props) => ({ })的方式來給。因為資料可能是非同步更新。
4.setState的第二個參數是個function,當state被設定完之後,就會執行。

Hello.js

import React from "react";

class Hello extends React.Component {
    constructor(props) {
      super(props);
      //初始化state的值
      this.state = {age:this.props.age,name:this.props.name};
      }

      play(event){
      //元件內部自己維護的 State
        this.setState({title: '我的名字是'});
        console.log("title",this.state.title);
        this.play2()
        this.play3();
      }

      play2(event){
        //因為 this.props 和 this.state 為非同步的被更新,它接受一個 function 而不是一個 object。Function 將接收先前的 state 作為第一個參數,並且將更新的 props 作為第二個參數
        this.setState((state, props) => ({      
            counter: 3 + props.age

        }));
        console.log('counter',this.state.counter);
      }

      play3(){
          this.setState({abc:'40'});
          console.log('abc',this.state.abc);
      }
    
      
    render() {
      return (
        <div>
          <button onClick={this.play.bind(this)}>送出</button>
          {console.log('counter',this.state.counter)}
          {console.log('abc',this.state.abc)}
        </div>
      );
    }
  }

  export default Hello;

執行結果:console.log
剛進網頁時

//[HMR] Waiting for update signal from WDS...
//Hello.js:37 counter undefined
//Hello.js:37 abc undefined

按下按鈕後:值都沒有存到state裡面。

this.play();
//title undefined
this.play2();
//counter undefined
this.play3();
//abc undefined

一直到render時,state的值才顯示出來。
//counter 我的名字是
//counter 321
//abc 40


上一篇
第十一天,React的props與state(上)
系列文
React基礎12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言